<template>
  <div class="list-container">
    <!-- 月劳务代发，劳务公司可以确认发放 -->
    <el-form class="search-panel" v-model="searchData" :inline="true">
      <el-form-item
        label-width="100px"
        class="search-time"
        label="考勤时间："
        prop="startToEnd"
      >
        <el-date-picker
          style="width: 250px"
          v-model="searchData.startToEnd"
          type="monthrange"
          range-separator="~"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
          value-format="yyyy-MM"
          clearable
          @change="change(searchData.startToEnd)"
        >
        </el-date-picker>
      </el-form-item>
      <!-- <el-form-item label-width="90px" label="审核状态：">
        <el-select v-model="searchData.status" placeholder="请选择审核状态：">
          <el-option
            v-for="item in statusList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
      <!-- <el-form-item>
        <el-button type="primary" @click="clear">重置</el-button>
      </el-form-item> -->
    </el-form>
    <div class="table-panel">
      <!-- <el-tag>劳务公司进入</el-tag> -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column
          prop="id"
          type="index"
          label="序号"
          width="60"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="payDate" label="考勤时间" align="center">
          <template slot-scope="scope">
            <div>{{ scope.row.payDate }}</div>
          </template>
        </el-table-column>
        <!--        <el-table-column prop="attendanceDate" label="考勤时间" align="center">-->
        <el-table-column
          prop="attendanceNum"
          label="考勤人数"
          align="center"
          min-width="80"
        >
        </el-table-column>
        <el-table-column
          prop="referenceMonthlyWageTotal"
          label="参考工资合计"
          min-width="120"
          align="center"
        >
          <template slot-scope="scope">
            <div>¥{{ scope.row.referenceMonthlyWageTotal }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="actualMonthWageTotal"
          label="实际工资合计"
          align="center"
          min-width="120"
        >
          <template slot-scope="scope">
            <div>¥{{ scope.row.actualMonthWageTotal }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="issuedMonthlyWage"
          label="已发放金额"
          align="center"
          min-width="110"
        >
          <template slot-scope="scope">
            <div>¥{{ scope.row.issuedMonthlyWage }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="unissuedMonthlyWage"
          label="未发放金额"
          align="center"
          min-width="110"
        >
          <template slot-scope="scope">
            <div>¥{{ scope.row.unissuedMonthlyWage }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="applyStatus" label="审核状态" align="center">
          <!-- <template slot-scope="scope">
            <div v-if="scope.row.confirm==0">已确认</div>
            <div v-else-if="scope.row.confirm==1">未确认</div>
            <div v-else>已发放</div>
          </template> -->
        </el-table-column>
        <el-table-column
          prop="operation"
          label="操作"
          fixed="right"
          align="center"
          min-width="180px"
        >
          <template slot-scope="scope">
            <el-button
              @click="checkRow(scope.row)"
              type="text"
              icon="el-icon-search"
              >查看</el-button
            >
            <el-button
              @click="confirmRow(scope.row)"
              type="text"
              icon="el-icon-circle-check"
              >确认</el-button
            >
            <el-button
              @click="badRow(scope.row)"
              type="text"
              icon="el-icon-circle-close"
              >驳回</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-row class="page">
        <div class="page-tag">
          共{{ Math.ceil(total / pageSize) }}页/{{ total }}条数据
        </div>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-sizes="[10, 20, 50]"
          :page-size="pageSize"
          layout="sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-row>
    </div>
  </div>
</template>

<script>
import workflowApi from "@/api/workflow/workFlow";
export default {
  data() {
    return {
      searchData: {
        startToEnd: null,
        applyStatus: null,
      },
      statusList: [
        { value: -1, label: "全部" },
        { value: 0, label: "已确认" },
        { value: 1, label: "未确认" },
        { value: 2, label: "已发放" },
      ],
      params: {
        pageNum: 1,
        pageSize: 10,
        isAsc: "desc",
      },
      tableData: [],
      total: 0,
      pageSize: 10,
      currentPage: 1,
      workForm:{}
    };
  },
  created() {
    this.getTableListExamineWorkflowApply();
  },
  methods: {
    getTableListExamineWorkflowApply(params) {
      this.tableData = []
      workflowApi.getExamineListWorkflow(params).then((res) => {
        let that = this;
        res.data.forEach(function (item, index) {
          that.giveDataToTableData(item);
        });
      });
    },
    giveDataToTableData(item) {
      if (item.canCheck) {
        const tableData = this.tableData;
        let data = item.attachInfo.split("*");
        let that = this;
        tableData.push({
          attendanceTime: data[0],
          payDate: data[0],
          serviceCorporationName: data[1],
          attendanceNum: data[2],
          referenceMonthlyWageTotal: data[3],
          actualMonthWageTotal: data[4],
          issuedMonthlyWage: data[5],
          unissuedMonthlyWage: data[6],
          projectId: data[7],
          applyStatus: that.convertStatus(item.applyStatus),
          workflowApplyId: item.applyId,
          personIds: item.personIds,
        });
        this.total = this.tableData.length;
      }
    },
    onSubmit() {
      console.log(this.searchData);
      if (this.searchData.startToEnd != null) {
        this.searchData.startDate = this.searchData.startToEnd[0];
        this.searchData.endDate = this.searchData.startToEnd[1];
      }
      this.getTableListExamineWorkflowApply({
        startDate: this.searchData.startDate,
        endDate: this.searchData.endDate,
        applyStatus:this.searchData.applyStatus,
      });
    },
    // 导入
    importItems() {},
    // 查看
    // checkedRow(row) {
    //   this.$router.push({path:'/agency/distributionDetails',query:{date:row.attendanceDate}})
    // },
    checkRow(res) {
      console.log("-----------------");
      console.log(res);
      this.$router.push({
        path: "/agency/issuanceRecord",
        query: {
          workflowApplyId: res.workflowApplyId,
          date: res.attendanceTime,
          personIds: res.personIds,
        },
      });
    },
    getWorkflowApplyInfo(workflowApplyId) {
      workflowApi
        .getWorkflowApplyInfo({ applyId: workflowApplyId })
        .then((res) => {
          this.workForm = res.data;
          this.workForm.applyNodeId = res.data.currentWorkflowNode.applyNodeId;
          this.workForm.type = 1;
        });
    },
    confirmRow(scope) {
      console.log(scope);
      this.getWorkflowApplyInfo(scope.workflowApplyId);
      this.$confirm(
        "是否确认发放 " +
          scope.attendanceTime +
          "月" +
          scope.attendanceNum +
          "人的工资?",
        "劳务代发审批",
        {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          console.log("workForm", this.workForm);
          workflowApi
            .examineWorkflow(this.workForm)
            .then((res) => {
              this.$message({
                type: "success",
                message: "审批成功!",
              });
              this.$router.push({ path: "/agency/record" });
            })
            .catch((res) => {
              console.log(res);
              this.$message({
                type: "info",
                message: "审批失败",
              });
            });
        })
        .catch(() => {
          this.workForm = {};
          this.$message({
            type: "info",
            message: "已取消审批",
          });
        });
    },
    badRow(scope) {
      this.getWorkflowApplyInfo(scope.workflowApplyId);
      this.$prompt(
        '请输入驳回意见','劳务代发审批',{
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
        }
      ).then(({ value }) => {
          this.workForm.type = 2
          console.log("workForm", this.workForm);
          this.workForm.examineReason = value
          workflowApi.examineWorkflow(this.workForm)
            .then((res) => {
              this.$message({
                type: "success",
                message: "驳回成功!",
              });
              this.$router.push({ path: "/agency/record" });
            })
            .catch((res) => {
              console.log(res);
              this.$message({
                type: "info",
                message: "驳回失败",
              });
            });
        })
        .catch(() => {
          this.workForm = {};
          this.$message({
            type: "info",
            message: "已取消驳回",
          });
        });
    },
    change(value) {
      if(value == null) {
        this.searchData = {}
          this.getTableListExamineWorkflowApply({
            applyStatus:this.searchData.applyStatus,
          });
      } else {
          this.getTableListExamineWorkflowApply({
            startDate: this.searchData.startToEnd[0],
            endDate: this.searchData.startToEnd[1],
            applyStatus:this.searchData.applyStatus,
          });
      }
    },
    handleSizeChange(val) {},
    handleCurrentChange(val) {},
    convertStatus(status) {
      let newStatus = "未知";
      switch (status) {
        case "1":
          newStatus = "待审核";
          break;
        case "2":
          newStatus = "审核中";
          break;
        case "3":
          newStatus = "已审核";
          break;
        case "4":
          newStatus = "已驳回";
          break;
        case "5":
          newStatus = "已撤回";
          break;
      }
      return newStatus;
    },
  },
};
</script>
